<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>格式化时间</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: rgba(100, 100, 100, .2);
    }

    #time,#add,#reduce {
        width: 700px;
        height: 200px;
        margin: auto;
        margin-top: 5%;
        background-color: rgba(100, 100, 100, .9);
        font-size: 50px;
        text-align: center;
        line-height: 200px;
    }
    </style>
</head>

<body>
    <div id='time'></div>
    <div id='add'></div>
    <div id='reduce'></div>
    <script type="text/javascript" src="./js/jquery-3.2.1.js"></script>
    <script>
    let el = document.getElementById('time');
    // let el = $("#time");
    showTime(el);

    function showTime(element) {
        let nowTime, year, month, date, hour, minute, second, time, el;
        nowTime = new Date();
        year = nowTime.getFullYear();
        month = nowTime.getMonth() + 1;
        date = nowTime.getDate();

        hours = nowTime.getHours();
        minutes = nowTime.getMinutes();
        seconds = nowTime.getSeconds();

        //处理时分秒小于10的格式问题
        hours = lt_10(hours);
        minutes = lt_10(minutes);
        seconds = lt_10(seconds);

        time = `${year}年${month}月${date}日&nbsp;${hours}:${minutes}:${seconds}`;

        //jquery对象转DOM对象
        if (element instanceof jQuery) {
            el = element[0];
        } else {
            el = element;
        }
        el.innerHTML = time;
        setTimeout(showTime, 1000, element);
    }

    function lt_10(e) {
        if (e < 10) {
            e = '0' + e;
        }
        return e;
    }

    /*计算累加时间*/
    add();
    function add(){
        var i = 0;
        $("#add").html('00时00分00秒')
        setInterval(function(){
            i++;
            /*时*/
            var hours = lt_10(Math.floor(i/3600));
            /*分*/
            var minutes = lt_10(Math.floor((i%3600)/60));
            /*秒*/
            var seconds = lt_10((i%3600)%60);
            var html = hours+'时'+minutes+'分'+seconds+'秒';
            $("#add").html(html)
        }, 1000);
    }

    /*倒计时*/
    function reduce(i){
         /*时*/
        var hours = lt_10(Math.floor(i/3600));
        /*分*/
        var minutes = lt_10(Math.floor((i%3600)/60));
        /*秒*/
        var seconds = lt_10((i%3600)%60);
        var html = hours+'时'+minutes+'分'+seconds+'秒';
        $("#reduce").html(html);
        setInterval(function(){
            i--;
            /*时*/
            hours = lt_10(Math.floor(i/3600));
            /*分*/
            minutes = lt_10(Math.floor((i%3600)/60));
            /*秒*/
            seconds = lt_10((i%3600)%60);
            html = hours+'时'+minutes+'分'+seconds+'秒';
            $("#reduce").html(html)
        }, 1000);
    }
    reduce(3601)
    </script>
</body>

</html>